<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-cascader
          :options="optionsArea"
          :props="{
            value: 'areaCode',
            label: 'areaName',
            children: 'children',
            checkStrictly: true,
          }"
          ref="cascader"
          @change="CascaderArea"
          :show-all-levels="false"
          v-model="query.areaCode"
        ></el-cascader>
      </el-col>
      <el-col :span="4">
        <el-select
          v-model="query.cateringMethods"
          clearable
          multiple
          collapse-tags
          placeholder="请选择供餐方式"
        >
          <!-- 1 自办食堂、2送餐 -->
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in [
              {
                value: '自主经营（委托经营）',
                label: '自主经营（委托经营）',
              },
              {
                value: '承包',
                label: '承包',
              },
              {
                value: '校外供餐',
                label: '校外供餐',
              },
            ]"
            :key="item.value"
          ></el-option>
          <!-- （委托经营），承包，校外供餐） -->
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          v-model="query.schoolTypes"
          clearable
          multiple
          collapse-tags
          placeholder="请选择学校办学类型"
        >
          <!-- 1 自办食堂、2送餐 -->
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in [
              {
                value: '幼儿园',
                label: '幼儿园',
              },
              {
                value: '小学',
                label: '小学',
              },
              {
                value: '初中',
                label: '初中',
              },
              {
                value: '高中',
                label: '高中',
              },
              {
                value: '职业类',
                label: '职业类',
              },
              {
                value: '九年一贯',
                label: '九年一贯',
              },
              {
                value: '十二年一贯',
                label: '十二年一贯',
              },
              {
                value: '高校',
                label: '高校',
              },
            ]"
            :key="item.value"
          ></el-option>
          <!-- （委托经营），承包，校外供餐） -->
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          v-model="query.schoolNatures"
          clearable
          multiple
          collapse-tags
          placeholder="请选择学校性质"
        >
          <!-- 1 自办食堂、2送餐 -->
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in [
              {
                value: '公办',
                label: '公办',
              },
              {
                value: '民办',
                label: '民办',
              },
              {
                value: '其他',
                label: '其他',
              },
            ]"
            :key="item.value"
          ></el-option>
          <!-- （委托经营），承包，校外供餐） -->
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select
          v-model="query.schoolClassifications"
          clearable
          multiple
          collapse-tags
          placeholder="请选择学校统计分类"
        >
          <!-- 1 自办食堂、2送餐 -->
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in [
              {
                value: '幼儿园',
                label: '幼儿园',
              },
              {
                value: '初等教育',
                label: '初等教育',
              },
              {
                value: '中等教育',
                label: '中等教育',
              },
              {
                value: '中等职业教育',
                label: '中等职业教育',
              },
              {
                value: '高等教育',
                label: '高等教育',
              },
            ]"
            :key="item.value"
          ></el-option>
          <!-- （委托经营），承包，校外供餐） -->
        </el-select>
      </el-col>
   
    </el-row>
    <rz-height />
    <el-row :gutter="20">
         <el-col :span="4">
        <el-input
          clearable
          maxlength="50"
          v-model="query.schoolName"
          placeholder="请输入学校名称"
        ></el-input>
      </el-col>
      <el-col :span="5">
        <el-input
          maxlength="50"
          clearable
          v-model="query.identify"
          placeholder="请输入统一社会信用代码"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button
          type="primary"
          @click="
            query.page = 1;
            getList();
          "
          >查询</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button type="default" @click="getExport">导出</el-button>
      </el-col>
    </el-row>
    <rz-height />

    <el-table border :data="tableData" style="width: 100%" stripe>
      <el-table-column label="区域街道" prop="districtName" width="150">
        <template slot-scope="scope">
          <div>{{ scope.row.districtName }}-{{ scope.row.streetName }}</div>
        </template>
      </el-table-column>

  <el-table-column label="学校名称" prop="schoolName"  width="220"></el-table-column>
  <el-table-column label="统一社会信用代码" prop="identify" width="180"></el-table-column>
  <el-table-column label="地址" prop="address" width="220"></el-table-column>
  <el-table-column label="主要负责人" prop="legal" width="100"></el-table-column>
  <el-table-column label="集中用餐学生人数" prop="studentDiningTotal" width="150"></el-table-column>
  <el-table-column label="供餐方式" prop="cateringMethod" width="120"></el-table-column>
  <el-table-column label="食堂数量" prop="canteensNumber" width="90"></el-table-column>
  <el-table-column label="其他经营主体数量" prop="otherNumber" width="150"></el-table-column>
  <el-table-column label="学校办学类型" prop="schoolType" width="150"></el-table-column>
  <el-table-column label="学校性质" prop="schoolNature" width="150"></el-table-column>
  <el-table-column label="学校统计分类" prop="schoolClassification" width="180"></el-table-column>
  <el-table-column label="主管部门" prop="competentDepartment" width="180"></el-table-column>
  <el-table-column label="操作" prop="districtName" width="100"  fixed="right">
   <template slot-scope="scope">
              <el-button  size="mini" @click="view(scope.row)"
                >查看</el-button
              >
            </template>

  </el-table-column>

    </el-table>


      <pagination
          :total="total"
          :page.sync="query.page"
          @pagination="getList"
          v-show="total"
        />




  </div>
</template>
<script>
import { findListByCondition, groupArea } from "@/api/modules/enterprise";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getCode();
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      query: {
        areaCode:this.$route.query.code||'320500000000',
        cateringMethods: [],
        identify: "",
        isPage: 0,
        page: 1,
        pageSize: 10,
        schoolClassifications: [],
        schoolName: "",
        schoolNatures: [],
        schoolTypes: [],
      },
      tableData: [],
      optionsArea: [],
      total:0,
    };
  },
  // 方法
  methods: {
    async getList() {
      let res = await findListByCondition({
        ...this.query,
        cateringMethods:this.query.cateringMethods.join(","),
        schoolClassifications:this.query.schoolClassifications.join(","),
        schoolNatures:this.query.schoolNatures.join(","),
        schoolTypes:this.query.schoolTypes.join(","),
      });
      this.tableData = res.data;
      this.total = res.totalCount;
    },
    getCode() {
      groupArea({
        params: {
          areaCode: this.query.areaCode,
        },
      }).then((res) => {
        this.optionsArea = [res.data];
      });
    },
   async view(e){
            this.$router.push(`/schoolView?id=${e.id}`)
    },
       CascaderArea(e) {
      this.query.areaCode = e[e.length - 1];
    },
    getExport(){

    }
  },
  // 监听属性
  watch: {},
  // 组件
  components: {},
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>

</style>
